import { formFieldMixin } from './formField';
/**
 * Input & Textarea
 */
export const inputBoxMixin = {
  mixins: [formFieldMixin],
  props: {
    placeholder: String,
    value: [String, Number],
    readonly: [Boolean, String, Number],
    type: {
      type: String,
      default: 'text',
    },
    icon: {
      type: String,
      default: '',
    },
    onEmpty: {
      type: Function,
      default: _ => _
    }
  },
  computed: {
    _element() {
      return this.element;
    },
    _class() {
      return this.className;
    },
  },
  methods: {
    _onInnerInput(evt) {
      const { target } = evt;
      this._onBaseIntercept(
        onChangeAfter => {
          this.$emit('input', target.value);
          onChangeAfter(target.value, evt);
        },
        target.value,
        () => {
          this.$refs.inputRef.value = this.value;
        }
      );
    },
  },
  render(h) {
    const { value, type, placeholder, disabled, readonly, _onInnerInput, _class, _display, icon } = this
    const children = [
      h(
        this._element,
        {
          domProps: { value, type, placeholder, readonly, disabled },
          on: { input: _onInnerInput },
          ref: 'inputRef'
        }
      )
    ]
    if (this._element === 'input' && icon === 'empty' && value) {
      children.push(h('span', {
        'class': 'iconfont error-full',
        on: {
          click: () => {
            this.$emit('input', '');
            try {
              this.onEmpty()
            } finally {
              console.log('error')
            }
          }
        }
      }))
    }
    return h('div', {
      'class': `${_class}${_display}`
    }, children)
    // return children
  }
}
